<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>控制台登录</title>
		<link rel="stylesheet" type="text/css" href="./lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="./css/page/login.css" />
		<script type="text/javascript" src="./js/utils/gVerify.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/constant/urls.js"></script>
		<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js" ></script>
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>控制台登录</h3>
				<div class="m-login-warp">
					<form class="layui-form">
						<div class="layui-form-item">
							<input type="text" name="username" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input type="password" name="password" required lay-verify="password" placeholder="密码" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<!--生成图片验码证，点击刷新验证码-->
							<div id="v_container"></div>
							<div class="layui-input-block rf-input">
								<input type="text" name="random" lay-verify="code" autocomplete="off" size="4" id="code_input" placeholder="请输入验证码" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>

					</form>
				</div>
				<p class="copyright">Copyright 2019-2020 by LEON</p>
			</div>
		</div>
		<script>
			$(function() {
				layui.use(['form', 'layedit', 'laydate'], function() {
					var form = layui.form,
						layer = layui.layer;

					//自定义验证规则
					form.verify({
						password: [/(.+){6,12}$/, '密码必须6到12位'],
						code: function(value) {
							if(!verifyCode.validate(value)) {
								return '验证码错误';
							}
						}
					});
					
					//监听提交
					form.on('submit(login)', function(data) {
						$.ajax({
							type: "get",
							url: urls.authUrl + '/auth/user/login',
							async: true,
							data: {username:data.field.username,password:data.field.password},
							success: function(res) {
								if (res.success) {
									sessionStorage.setItem("accessToken",res.data.accessToken);
									layer.msg(res.description, {
										icon: 6
									}, function() {
										location.href = './index.html'
									});
								} else {
									layer.msg(res.description, {
										icon: 5
									});
								}
							}
						});
						return false;
					});
					/*调用验证码生成方法*/
					var verifyCode = new GVerify("v_container");
				});
			})
		</script>
	</body>

</html>